import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import Blank from '@/pages/common/blank';
import notdataImg from '@/assets/image/none/none.png';
import right from '@/assets/image/message/right.png';
import api from 'api';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      refresherTriggered: false,
      message: []
    };
  }

  componentDidMount() {
    let { title } = getCurrentInstance().router.params;
    Taro.setNavigationBarTitle({ title });
  }

  componentDidShow() {
    this.props.actions.init()
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  _onScrollToLower = () => {
    let {
      main: { pageNum, totalPage },
      actions: { action }
    } = this.props;
    let num = pageNum + 1;
    if (num == totalPage) return;
    this.props.actions.action.commonChange('main.pageNum', num)
    this.props.actions.action.page()
  };

  _onRefresherRefresh = () => {
    const { refresherTriggered } = this.state;
    if (refresherTriggered) return;
    this.setState({
      refresherTriggered: true,
    });
    this.props.actions.action.commonChange('main.pageNum', 0);
    this.props.actions.action.page()
    setTimeout(() => {
      this.setState({
        refresherTriggered: false,
      });
    }, 2000);
  };

  async confirmMsg(item, index) {
    let {
      main: { findMessageList },
    } = this.props;
    if (item.status == 0) {
      const params = {
        id: item.id,
      };
      let res = await api.messageController.confirmMsg(params);
      if (res.code == '200') {
        findMessageList[index].status = true
        this.props.actions.action.commonChange('main.findMessageList', JSON.parse(JSON.stringify(findMessageList)));
      }
    }
  }


  render() {
    let { refresherTriggered } = this.state;
    let {
      main: { findMessageList, pageNum, totalPage, isLoading },
      actions: { action },
    } = this.props;
    return (
      <ScrollView
        className="packageAMessageList"
        scrollY
        onScrollToLower={this._onScrollToLower}
        refresherEnabled={true}
        refresherTriggered={refresherTriggered}
        onRefresherPulling={this._onRefresherRefresh}>
        {
          findMessageList && findMessageList.length > 0 ?
            <View>
              {
                findMessageList.map((item, index) => {
                  return (
                    <View className='list'
                      onClick={() => this.confirmMsg(item, index)}
                      key={index}>
                      <Text className='createDateStr'>
                        {item.createDateStr}
                      </Text>
                      <View className='itemBox'>
                        <View className='itemText'>
                          <View className='r_sb'>
                            <Text className='title'>
                              {item.title}
                            </Text>
                          </View>
                          <Text className='content'>
                            {item.content}
                          </Text>
                          {/* <View style={{ flexDirection: 'row' }}>
                            <Text className='look'>去查看</Text>
                            <View className='center'>
                              <Image className="right" src={right} mode="widthFix" />
                            </View>
                          </View> */}
                        </View>
                        <View>
                          <Text
                            className='t_status'
                            style={{
                              color: item.status ? '#999999' : 'rgb(233,60,60)'
                            }}>
                            {item.status ? '' : '·'}
                          </Text>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
            :
            <Blank
              content="暂无消息通知！"
              img={notdataImg}
              imgStyle={{ width: '400rpx', height: '400rpx' }}
              textStyle={{
                fontSize: '32rpx', color: '#999999', textAlign: 'center', marginTop: '40rpx'
              }}
            />
        }
        {findMessageList.length != 0 && pageNum + 1 != totalPage && <View className="status">加载中</View>}
        {
          !isLoading && findMessageList.length != 0 && pageNum + 1 == totalPage && (
            <View className="status">没有更多了</View>
          )
        }
      </ScrollView>
    );
  }
}
